<!--
 * @Date: 2024-01-12 17:19:44
 * @LastEditors: truman
 * @LastEditTime: 2024-02-24 20:32:13
 * @FilePath: \newbee-mall-vue3-app\src\views\Setting.vue
-->
<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * Copyright (c) 2020 陈尼克 all rights reserved.
 * 版权所有，侵权必究！
 *
-->

<template>
  <div class="seting-box">
    <s-header :name="'账号管理'"></s-header>
    <div class="input-item">
      <van-field v-model="state.nickName" label="昵称" />
      <van-field v-model="state.old_password" type="password" label="旧密码" />
      <van-field v-model="state.new_password" type="password" label="新密码" />
      <van-field
        v-model="state.confirm_password"
        type="password"
        label="确认密码"
      />
    </div>
    <van-button
      round
      class="save-btn"
      color="#1baeae"
      type="primary"
      @click="save"
      block
      >修改密码</van-button
    >
    <van-button
      round
      class="save-btn"
      color="#1baeae"
      type="primary"
      @click="handleLogout"
      block
      >退出登录</van-button
    >
  </div>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import md5 from "js-md5";
import { useRouter } from "vue-router";
import sHeader from "@/components/SimpleHeader.vue";
import { getUserInfo, EditUserInfo, EditPwd } from "@/service/user";
import { setLocal } from "@/common/js/utils";
import { showSuccessToast, showToast } from "vant";
const router = useRouter();
const state = reactive({
  nickName: "",
  introduceSign: "",
  old_password: "",
  new_password: "",
  confirm_password: "",
  user: null,
});

onMounted(async () => {
  try {
    const data = await getUserInfo();
    state.user = data;
    state.nickName = data.nickname;
  } catch (error) {
    localStorage.clear();
  }
});

const save = async () => {
  const finalCheckPwd =
    /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,16}$/;

  // 两次密码必须相同
  if (state.new_password !== state.confirm_password) {
    showToast({
      message: "两遍密码必须相同",
      className: "particulars-detail-popup",
    });
    return;
  }

  const checkPwd = finalCheckPwd.test(state.new_password);

  if (!checkPwd) {
    showToast({
      message:
        "密码必须包含大小写字母、数字、特殊字符中至少3种  并且位数不小于8",
      className: "particulars-detail-popup",
    });
    return;
  }
  await EditPwd(state.old_password, state.new_password, state.confirm_password)
    .then((res) => {
      showToast({
        message: res.message ? res.message : "修改成功",
        className: "particulars-detail-popup",
      });
      router.back()
    })
    .catch((err) => {
      let e = "";
      for (const key in err.response.data.message) {
        if (Object.hasOwnProperty.call(err.response.data.message, key)) {
          const el = err.response.data.message[key];

          e += el;
        }
      }
      showToast({
        message: e,
        className: "particulars-detail-popup",
      });
    });
};

const handleLogout = async () => {
  // const { resultCode } = await logout();
  // if (resultCode == 200) {
  setLocal("token", "");
  setLocal("access_token", "");
  setLocal("refresh_token", "");
  router.push({ path: `/login` });
  // }
};
</script>

<style lang="less" scoped>
.seting-box {
  .save-btn {
    width: 80%;
    margin: 20px auto;
  }
}
</style>
